<template>
  <div class="menuList">
    <el-tabs type="border-card">
      <el-tab-pane label="未审微课列表">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left">
            <div style="float:left">
              <i class="el-icon-s-check"></i>
              <span>审核微课</span>
            </div>
          </div>
          <el-table :data="wExamine" border style="width: 100%">
            <el-table-column fixed prop="wk_id" label="微课ID" width="150"></el-table-column>
            <el-table-column label="微课封面" width="82">
              <template slot-scope="scope">
                <img :src="scope.row.wk_pic" width="60" height="40" class="head_pic" />
              </template>
            </el-table-column>
            <el-table-column prop="wk_name" label="视屏名称" width="120"></el-table-column>
            <el-table-column prop="wk_total_time" label="时长" width="120"></el-table-column>
            <el-table-column prop="category_name" label="微课类别" width="120"></el-table-column>
            <el-table-column prop="wk_introduce" label="微课介绍"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="left(scope.row.wk_id)" type="text" size="small">详情审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="审核通过">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left;">
            <div style="float:left">
              <i class="el-icon-success"></i>
              <span>通过作品</span>
            </div>
          </div>
          <el-table :data="pExamine" border style="width: 100%">
            <el-table-column fixed prop="wk_id" label="微课ID" width="150"></el-table-column>
            <el-table-column label="微课封面" width="82">
              <template slot-scope="scope">
                <img :src="scope.row.wk_pic" width="60" height="40" class="head_pic" />
              </template>
            </el-table-column>
            <el-table-column prop="wk_name" label="视频名称" width="220"></el-table-column>
            <el-table-column prop="wk_total_time" label="时长" width="120"></el-table-column>
            <el-table-column prop="category_name" label="微课类别" width="120"></el-table-column>
            <el-table-column prop="wk_introduce" label="微课介绍"></el-table-column>
            <el-table-column prop="wk_state" label="审核详情"></el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="审核未通过">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left;">
            <div style="float:left">
              <i class="el-icon-warning"></i>
              <span>未通过作品</span>
            </div>
          </div>
          <el-table :data="nExamine" border style="width: 100%">
            <el-table-column fixed prop="wk_id" label="微课ID" width="150"></el-table-column>
            <el-table-column label="微课封面" width="82">
              <template slot-scope="scope">
                <img :src="scope.row.wk_pic" width="60" height="40" class="head_pic" />
              </template>
            </el-table-column>
            <el-table-column prop="wk_name" label="视频名称" width="220"></el-table-column>
            <el-table-column prop="wk_total_time" label="视频时长" width="120"></el-table-column>
            <el-table-column prop="category_name" label="微课类别" width="120"></el-table-column>
            <el-table-column prop="wk_introduce" label="微课介绍"></el-table-column>
            <el-table-column prop="wk_state" label="审核详情"></el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-drawer :visible.sync="drawer" direction="rtl" size="50%">
      <b>微课审核</b>
      <el-divider content-position="left">
        <i class="el-icon-s-check"></i>
      </el-divider>
      <div class="evamine">
        <p>
          微课名称：
          <b>{{gridData.wk_name}}</b>
          ——<b style="color:blue">{{gridData.category_name}}</b> 类
        </p>
        <p>
          <video :src="gridData.wk_video_adress" controls></video>
        </p>
        <p style="text-indent:2em;">{{gridData.wk_introduce}}</p>
        <div>
          <el-button type="success" @click="pass(gridData.wk_id,1)">通过审核</el-button>
          <el-button type="danger" @click="pass(gridData.wk_id,2)">审核失败</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      examine:[],
      wExamine: [], //未审核
      pExamine: [], //审核通过
      nExamine: [], //审核失败
      drawer: false,
      gridData: [],
      user: {}
    };
  },
  mounted() {
    this.user = JSON.parse(this.$cookie.get("userAdmin"));
    this.getWks();
  },
  methods: {
    //获取微课
    getWks() {
      var that = this;
      that.$axios
        .get("apis/admin/wklist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var wksList = res.data.data;
              that.examine = wksList
              var wExa = []; //未审核
              var pExa = []; //审核通过
              var nExa = []; //审核失败
              for (var i = 0; i < wksList.length; i++) {
                console.log(wksList[i].wk_state);
                if (wksList[i].wk_state == 0) {
                  //未审核
                  wksList[i].wk_state = "未审核";
                  wExa.push(wksList[i]);
                } else if (wksList[i].wk_state == 1) {
                  //审核通过
                  wksList[i].wk_state = "审核通过";
                  pExa.push(wksList[i]);
                } else if (wksList[i].wk_state == 2) {
                  //审核失败
                  wksList[i].wk_state = "审核失败";
                  nExa.push(wksList[i]);
                }
              }
              that.wExamine = wExa;
              that.pExamine = pExa;
              that.nExamine = nExa;
              console.log(that.wExamine);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //审核右边弹出
    left(id) {
      var that = this;
      console.log(id);
      that.drawer = true;
      console.log(that.wExamine);
      for (var i = 0; i < that.wExamine.length; i++) {
        if (that.wExamine[i].wk_id == id) {
          var editVal = that.wExamine[i];
        }
      }
      that.gridData = editVal;
    },
    //通过审核_审核微课
    pass(id, num) {
      var that = this;
      var parse = {
        admin_id: that.user.admin_id,
        wk_id: id,
        wk_state: num
      };
      that.$axios
        .post("apis/admin/auditwk", this.$qs.stringify(parse))
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.drawer = false;
              that.getWks();
              that.$message({
                message:
                  num == 1
                    ? "给予审核通过~"
                    : "给予审核不通过~ 给予审核不通过~ 给予审核不通过~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  
};
</script>

<style lang="less" scoped>
.menuList {
  height: 810px;
  .el-card {
    width: 100% !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
  .evamine {
    width: 90%;
    margin: 0 auto;
    p {
      text-align: left;
      line-height: 40px;
      video {
        width: 100%;
      }
    }
    div {
      width: 40%;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
